<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>

    /*Flex 容器*/
    .flex__container {
      /* display: inline-flex; */
      display: flex;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 50px;
      height: 50px;

      background-color: aqua;
      border: 1px solid black;
    }

  </style>
</head>
<body>

<!--Flex容器-->
<div class="flex__container">

  <!--Flex容器中的子Item-->
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

</body>
</html>